<template>
	<view class="page bg-white">
		<cu-custom bgColor="bg-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>

		</cu-custom>


		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in taber" :key="index"
				@tap="tabSelect" :data-id="index">
				{{item.name}}
			</view>
		</scroll-view>

		<mescroll-body :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">

			<view v-for="data in dataList"> 数据列表... </view>
		</mescroll-body>

		<view class="order-box">
			<view class="order-box-item  solid-bottom" v-for="(item,index) in 5" :key="index">
				<view class="order-box-head ">
					<text class="order-box-head-title">2000</text>
					<text>未中奖</text>
				</view>
				<view class="order-box-bottom ">
					<text>个人订单</text>
					<text>2021 08 30</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		
		components: {
			MescrollBody
		},
		data() {
			return {
				title: "我的订单",
				TabCur: 0,
				scrollLeft: 0,
				taber: [{
						name: "全部",
						type: 0,

					},
					{
						name: "个人订单",
						type: 1
					},
					{
						name: "我的发单",
						type: 2

					},
					{
						name: "我的跟单",
						type: 3
					}
				],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: {
				
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				// 列表数据
				dataList: [],
			}

		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调, 有3种处理方式:*/
			downCallback() {
				// 绝大部分情况methods中都不用写downCallback的,此时会默认调MescrollMixin的downCallback (效果同第2种)

				// 第1种: 请求具体接口
				// uni.request({
				// 	url: 'xxxx',
				// 	success: () => {
				// 		// 请求成功,隐藏加载状态
				// 		this.mescroll.endSuccess()
				// 	},
				// 	fail: () => {
				// 		// 请求失败,隐藏加载状态
				// 		this.mescroll.endErr()
				// 	}
				// })
				// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				// 第3种: 下拉刷新什么也不处理, 可直接调用或者延时一会调用 mescroll.endSuccess() 结束即可
				this.mescroll.endSuccess()
			},


			upCallback(page) {


			}


		}




	}
</script>

<style scoped>
	.order-box {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.order-box-item {
		width: 100%;
		min-height: 100rpx;
	}

	.order-box-item>view {
		width: 96%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;


	}

	.order-box-head {
		padding: 20rpx 15rpx 0 15rpx;
	}

	.order-box-bottom {
		padding: 10rpx 15rpx 20rpx 15rpx;
	}

	.order-box-head-title {
		max-width: 80%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>
